<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>JS_chen-商城</title>
    <link type="text/css" rel="stylesheet" href="__ZHOME__/css/base.css">
    <link type="text/css" rel="stylesheet" href="__ZHOME__/css/style.css">
    <link type="text/css" rel="stylesheet" href="__ZHOME__/css/idialog.css">
    <script src="__ZHOME__/js/jquery.js"></script>
    <script src="__ZY__/node_modules/vue/dist/vue.js"></script>
    <script src="__ZY__/node_modules/axios/dist/axios.js"></script>
    {block name='header'}{/block}
</head>
<body>
<div id="app">
    <div class="header">
        <div class="center">
            <div class="logo icon-bgr icon-logo ani-bg fl m-t-17">
                <a href="/">首页</a>
            </div>
            <div class="category tc fl" id="category">
                <a href="#" class="f16 lh2">礼物分类<i class="icon-bgr icon-list m-l-5"></i></a>
                <div id="category_pop" class="category-pop tc dn">
                    {foreach $categoryData as $v}
                    <a href="/category/{$v['cid']}.html">{$v['catname']}</a>
                    {/foreach}
                </div>
            </div>
            <div class="nav fl f16 lh2 m-t-28 rel">
                <a href="/category/2.html">科技达人</a>
                <a href="/category/3.html">创意礼物</a>
                <a href="/category/9.html">音乐欣赏</a>
            </div>
            <!--登陆 注册-->
            <div class="operate fr m-t-31 rel" id="user_operate">
                <a href="user.html" id="nav_user">
                    <i class="icon-bgr icon-user m-7 ani-bg"></i>
                    <span class="cart-count" id="cart_count">{{cartLen}}</span>
                </a>

                <a href="#" class="m-l-5" id="nav_cart">
                    <i class="icon-bgr icon-cart ani-bg"></i>
                </a>


                <div class="user-box user-signin dn" id="nav_user_box">
                    <i class="icon-bgr icon-operate"></i>
                    {if condition="session('?user.user_username')"}
                        <dl class="tc" >
                            <dt class="f-b28850">
                                <?php echo  session('user.user_username') ?>
                            </dt>
                            <dd class="lh2"><a href="/user.html">个人中心</a></dd>
                            <dd class="lh2"><a href="/orderlist.html">我的订单</a></dd>

                            <dd class="lh2"><a href="/logout.html">退出登陆</a></dd>
                        </dl>
                    {else /}
                        <dl class="tc">
                            <dt class="f-b28850">
                                <a class="f-b28850" href="/login.html">登录</a> /
                                <a class="f-b28850" href="/register.html">注册</a>
                            </dt>
                            <dd class="lh2"><a href="/user.html">个人中心</a></dd>
                            <dd class="lh2"><a href="/orderlist.html">我的订单</a></dd>
                        </dl>
                    {/if}
                </div>
                <div class="user-box user-cart dn" id="nav_cart_box"  style="z-index: 1; display: none;" v-if="cart">
                    <i class="icon-bgr icon-operate"></i>
                    <table class="f12">
                        <tbody >
                        <tr class="gds" v-for="(v,k) in cart">
                            <td width="25%">
                                <a :href="'goods/'+v['id']+'.html'">
                                    <img width="60px" :src="v['cover']">
                                </a>
                            </td>
                            <td class="overtxt" width="50%">
                                <a :href="'goods/'+v['id']+'.html'">{{v['name']}}</a><br>礼物颜色:{{v['options'][0]['sname']}}
                            </td>
                            <td class="tr" width="25%">X{{v['num']}}<br>￥{{v['price']}}<br>
                                <a class="remove_item" data-rec-id="1301026" @click="del(k)" href="javascript:void(0)">删除</a>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="3">
                                <div class="clear m-t-10">
                                    <a href="/cart.html" class="fr btn-red-sml ani-bg">去购物车结算</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="user-box user-cart dn" id="nav_cart_box" style="z-index: 1; display: none;" v-else="cart">
                    <i class="icon-bgr icon-operate"></i>
                    <p class="f12 f-999 tc p-y-20">购物车中还没有商品，赶紧选购吧！</p>
                </div>
            </div>
            <div class="search fr m-t-31">
                <!--搜索框-->
                <input type="text" name="search" id="head-search"><a href="javascript:void(0)" class="icon-bgr icon-search m-l-5" id="head-searchbtn"></a>
            </div>
        </div>
    </div>
    <!--送给谁-->

    {block name='content'}{/block}

    <div class="footer">
        <div class="top">
            <div class="center clear">
                <div class="top-box1 fl">
                    <i class="icon-bgr icon-logo-bt fl m-r-60 m-l-20"></i>
                </div>
                <div class="top-box2 fl">
                    <img src="__ZHOME__/picture/slogan.png">
                </div>
                <div class="top-box3 fl">
                    <p class="fb f16">关注我们</p>
                    <p class="m-t-10">
                        <!--<a href="#" target="_blank" class="icon-bgr icon-sina"></a>-->
                        <!--<a href="#" target="_blank" class="icon-bgr icon-tencent m-l-10"></a>-->
                        <a href="javascript:void(0)" target="_blank" class="icon-bgr icon-wechat m-l-10 rel"><span class="dn pic-wx"></span></a>
                    </p>
                </div>
                <div class="top-box4 fl tc">
                    <p class="f12">周一至周日 8:00-24:00</p>
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=1677658490&site=qq&menu=yes" class="qqbtn lh1 m-t-10 dib">QQ在线交谈</a>
                </div>
            </div>
        </div>
        <div class="bottom clear f-e7e7e7">

            <ul class="center clear icons f18 fb">
                <li class="fl fst"><i class="icon-bgr1 icon-ft1 m-r-16"></i>30天免费退换货</li>
                <li class="fl"><i class="icon-bgr1 icon-ft2 m-r-16"></i>100%正品保证</li>
                <li class="fl"><i class="icon-bgr1 icon-ft3 m-r-16"></i>全场免运费</li>
                <li class="fl"><i class="icon-bgr1 icon-ft4 m-r-16"></i>提供礼品级包装</li>
            </ul>
            <div class="center links clear">
                <div class="fl">
                    <p class="f-c3c3c3"><span class="m-r-16">© JS_chen</span><span><a href="" rel="nofollow" target="_blank"> </a></span></p>
                </div>
                <div class="fr">
                    <p class="f-f5f5f5 f0">
                        <!--<a href="#" target="_blank" class="f-f5f5f5">关于我们</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">帮助中心</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">人才招聘</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">售后服务</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">配送与验收</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">联系我们</a>-->
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!--vue代码放在上面 不然jquery一下代码回有问题-->
<script>
    let carts = new Vue({
        el:'#app',
        data:{
            cart:'',
        },
        mounted(){

            axios.get('/api/APi/cart').then(function (response) {
                carts.cart = response.data;
            })
        },
        methods:{
            del(k){
                axios.get('/api/APi/delete?sid='+k).then(function (response) {
                    carts.cart = response.data;
                })
            }
        },
        computed:{
            cartLen(){
                let sum=0;
                // 如果有元素
                if(this.cart != null){
                    for (v in this.cart){
                        sum = sum +1;
                    }
                }

                return sum;
            }
        }


    })
</script>
<script src="__ZHOME__/js/common.js"></script>
{block name='footer'}

{/block}

</body>
</html>